<template>
  <view class="cyberpunk-container">
    <!-- 状态栏 -->
    <view class="status-bar">
      <text class="time">{{ currentTime }}</text>
      <view class="status-icons">
        <text class="network">{{ networkSpeed }} KB/s</text>
        <text class="battery">{{ batteryLevel }}</text>
      </view>
    </view>
    
    <!-- 顶部用户信息区 -->
    <view class="header-container">
      <view class="profile-header">
        <view class="avatar-section">
          <view class="avatar-container">
            <image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
            <view class="avatar-glow"></view>
          </view>
          <view class="user-info">
            <text class="username">{{ userInfo.userName }}</text>
            <text class="user-level">{{ userInfo.level }} 级会员</text>
            <text class="user-points">积分: {{ userInfo.points }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view scroll-y class="content-area">
      <!-- 量子会员卡片 -->
      <view class="card-container">
        <view class="membership-card" @click="goToRecharge">
          <view class="card-header">
            <view class="card-icon">⚛️</view>
            <view class="card-title">
              <text class="title-main">量子会员</text>
              <text class="title-sub">QUANTUM MEMBERSHIP</text>
            </view>
            <view class="card-arrow">→</view>
          </view>
          
          <view class="card-content">
            <view class="membership-status">
              <text class="status-label">会员状态</text>
              <text class="status-value" :class="membershipStatus.class">{{ membershipStatus.text }}</text>
            </view>
            <view class="expire-date">
              <text class="expire-label">到期时间</text>
              <text class="expire-value">{{ userInfo.membershipExpire }}</text>
            </view>
          </view>
          
          <view class="card-benefits">
            <view class="benefit-item" v-for="benefit in memberBenefits" :key="benefit.id">
              <text class="benefit-icon">{{ benefit.icon }}</text>
              <text class="benefit-text">{{ benefit.title }}</text>
            </view>
          </view>
          
          <view class="card-action">
            <text class="action-text">点击充值续费</text>
            <view class="action-glow"></view>
          </view>
        </view>
      </view>
      
      <!-- 选项卡 -->
      <view class="tab-container">
        <view 
          class="tab-item" 
          :class="{ 'active': activeTab === 'stats' }"
          @click="activeTab = 'stats'"
        >
          <text>数据统计</text>
          <view class="tab-line" v-if="activeTab === 'stats'"></view>
        </view>
        <view 
          class="tab-item" 
          :class="{ 'active': activeTab === 'settings' }"
          @click="activeTab = 'settings'"
        >
          <text>系统设置</text>
          <view class="tab-line" v-if="activeTab === 'settings'"></view>
        </view>
      </view>
      
      <!-- 选项卡内容 -->
      <view class="tab-content">
        <!-- 数据统计 -->
        <view v-if="activeTab === 'stats'" class="tab-pane">
          <view class="stats-grid">
            <view class="stat-item" v-for="stat in userStats" :key="stat.id">
              <view class="stat-icon">{{ stat.icon }}</view>
              <view class="stat-info">
                <text class="stat-value">{{ stat.value }}</text>
                <text class="stat-label">{{ stat.title }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 设置列表 -->
        <view v-if="activeTab === 'settings'" class="tab-pane">
          <view class="settings-list">
            <view 
              class="setting-item" 
              v-for="setting in settingsList" 
              :key="setting.id"
              @click="handleSettingSelect(setting)"
              :class="{ 'danger': setting.danger }"
            >
              <view class="setting-icon">{{ setting.icon }}</view>
              <text class="setting-title">{{ setting.title }}</text>
              <view class="setting-arrow">→</view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 底部空间 -->
      <view style="height: 50px;"></view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue';

// 状态栏数据
const currentTime = ref('18:58');
const networkSpeed = ref('150');
const batteryLevel = ref('56');

// 选项卡状态
const activeTab = ref('stats');

// 更新时间的函数
const updateTime = () => {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  currentTime.value = `${hours}:${minutes}`;
};

// 模拟网络速度变化
const updateNetworkSpeed = () => {
  networkSpeed.value = Math.floor(Math.random() * 200 + 50).toString();
};

// 定时器
let timeInterval = null;
let networkInterval = null;

onMounted(() => {
  updateTime();
  timeInterval = setInterval(updateTime, 60000);
  networkInterval = setInterval(updateNetworkSpeed, 10000);
});

onUnmounted(() => {
  if (timeInterval) clearInterval(timeInterval);
  if (networkInterval) clearInterval(networkInterval);
});

// 用户信息
const userInfo = reactive({
  userName: '梦之泪伤',
  avatar: '/placeholder.svg?height=80&width=80',
  level: '16',
  points: 4280,
  membershipExpire: '2025-12-31'
});

// 会员状态计算
const membershipStatus = computed(() => {
  const expireDate = new Date(userInfo.membershipExpire);
  const now = new Date();
  const daysLeft = Math.ceil((expireDate - now) / (1000 * 60 * 60 * 24));
  
  if (daysLeft > 30) {
    return { text: '正常', class: 'active' };
  } else if (daysLeft > 0) {
    return { text: `${daysLeft}天后到期`, class: 'warning' };
  } else {
    return { text: '已过期', class: 'expired' };
  }
});

// 会员权益
const memberBenefits = reactive([
  { id: 1, title: '专属技术支持', icon: '🎧' },
  { id: 2, title: '高级诊断工具', icon: '🔧' },
  { id: 3, title: '优先处理', icon: '⭐' },
  { id: 4, title: '无限次诊断', icon: '♾️' }
]);

// 用户统计数据
const userStats = reactive([
  { id: 1, title: '诊断次数', value: 42, icon: '🔍' },
  { id: 2, title: '优化次数', value: 18, icon: '🔄' },
  { id: 3, title: '已解决问题', value: 15, icon: '✅' },
  { id: 4, title: '节省时间', value: '6h', icon: '⏰' }
]);

// 设置列表
const settingsList = reactive([
  { id: 1, title: '账号安全', icon: '🛡️' },
  { id: 2, title: '通知设置', icon: '🔔' },
  { id: 3, title: '隐私政策', icon: '🔒' },
  { id: 4, title: '关于我们', icon: 'ℹ️' },
  { id: 5, title: '退出登录', icon: '🚪', danger: true }
]);

// 跳转到充值页面
const goToRecharge = () => {
  uni.showLoading({
    title: '加载中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    try {
      uni.navigateTo({
        url: '/pages/ccc/ccc'
      });
    } catch (e) {
      console.error('页面跳转错误:', e);
      uni.showToast({
        title: '充值页面正在开发中',
        icon: 'none'
      });
    }
  }, 800);
};

// 处理设置选择
const handleSettingSelect = (setting) => {
  if (setting.id === 5) {
    uni.showModal({
      title: '确认退出',
      content: '您确定要退出登录吗？',
      confirmColor: '#ff00ff',
      success: (res) => {
        if (res.confirm) {
          uni.redirectTo({
            url: "/pages/Login/Login"
          });
          uni.showToast({
            title: '已退出登录',
            icon: 'success'
          });
        }
      }
    });
    return;
  }
  
  uni.showToast({
    title: `您选择了: ${setting.title}`,
    icon: 'none'
  });
};
</script>

<style>
.cyberpunk-container {
  background-color: #000;
  color: #fff;
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 15px;
  background-color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  font-size: 12px;
  color: #00ffff;
  box-sizing: border-box;
  width: 100%;
}

.status-icons {
  display: flex;
  align-items: center;
}

.network {
  margin-right: 10px;
}

.header-container {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255, 0, 255, 0.1) 0%, rgba(0, 255, 255, 0.1) 100%);
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}

.profile-header {
  width: 100%;
}

.avatar-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar-container {
  position: relative;
  width: 80px;
  height: 80px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #00ffff;
  background: #333;
}

.avatar-glow {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff00ff, #00ffff);
  opacity: 0.3;
  animation: avatar-pulse 2s ease-in-out infinite alternate;
  z-index: -1;
}

@keyframes avatar-pulse {
  0% { transform: scale(1); opacity: 0.3; }
  100% { transform: scale(1.1); opacity: 0.6; }
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.username {
  font-size: 24px;
  font-weight: bold;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.user-level {
  font-size: 16px;
  color: #ff00ff;
  font-weight: bold;
}

.user-points {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.content-area {
  height: calc(100vh - 180px);
  padding: 15px;
  box-sizing: border-box;
  width: 100%;
}

.card-container {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.membership-card {
  background: linear-gradient(135deg, rgba(255, 0, 255, 0.1) 0%, rgba(0, 255, 255, 0.1) 100%);
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 15px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.membership-card:active {
  transform: scale(0.98);
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
}

.membership-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.membership-card:active::before {
  left: 100%;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.card-icon {
  font-size: 24px;
  margin-right: 15px;
}

.card-title {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.title-main {
  font-size: 20px;
  font-weight: bold;
  color: #ff00ff;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.title-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card-arrow {
  font-size: 20px;
  color: #00ffff;
  animation: arrow-bounce 2s ease-in-out infinite;
}

@keyframes arrow-bounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

.card-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.membership-status, .expire-date {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.status-label, .expire-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.status-value {
  font-size: 14px;
  font-weight: bold;
}

.status-value.active {
  color: #00ff00;
  text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
}

.status-value.warning {
  color: #ffff00;
  text-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
}

.status-value.expired {
  color: #ff0000;
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}

.expire-value {
  font-size: 14px;
  color: #00ffff;
  font-weight: bold;
}

.card-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 255, 0.2);
}

.benefit-icon {
  font-size: 16px;
}

.benefit-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.card-action {
  text-align: center;
  position: relative;
  padding: 10px;
  background: rgba(255, 0, 255, 0.1);
  border-radius: 10px;
  border: 1px solid rgba(255, 0, 255, 0.3);
}

.action-text {
  font-size: 16px;
  color: #ff00ff;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.action-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 10px;
  background: linear-gradient(45deg, rgba(255, 0, 255, 0.2), rgba(0, 255, 255, 0.2));
  opacity: 0;
  animation: action-pulse 3s ease-in-out infinite;
}

@keyframes action-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.tab-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 50px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(255, 0, 255, 0.2);
  box-sizing: border-box;
}

.tab-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex: 1;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  transition: all 0.3s ease;
}

.tab-item.active {
  color: #00ffff;
}

.tab-line {
  position: absolute;
  bottom: -1px;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #ff00ff, #00ffff);
  border-radius: 3px 3px 0 0;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; width: 0; }
  to { opacity: 1; width: 40px; }
}

.tab-content {
  width: 100%;
  box-sizing: border-box;
}

.tab-pane {
  animation: fadeInContent 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

@keyframes fadeInContent {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.stat-item {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  backdrop-filter: blur(5px);
}

.stat-icon {
  font-size: 24px;
}

.stat-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setting-item {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 10px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
}

.setting-item:active {
  transform: scale(0.98);
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

.setting-item.danger {
  border-color: rgba(255, 0, 0, 0.3);
}

.setting-item.danger:active {
  border-color: rgba(255, 0, 0, 0.6);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.2);
}

.setting-icon {
  font-size: 20px;
}

.setting-title {
  flex: 1;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

.setting-item.danger .setting-title {
  color: #ff6b6b;
}

.setting-arrow {
  font-size: 16px;
  color: #00ffff;
}

.setting-item.danger .setting-arrow {
  color: #ff6b6b;
}
</style>